import {useState} from 'react'
// import Color_Navbar_container from '../../Color_Navbar/color_Navbar.tsx'
import './year.css'

function year() {
const [activeIndex, setActiveIndex] = useState(0);
const handleTabClick = (index:number) => {
  setActiveIndex(index);
}
const tabList = [
  { name: '2024', content:'全部'},
  { name: '2023', content: '广告设计'},
  { name: '2022', content: '优惠促销' },
  { name: '2021', content: '活动福利' },
  { name: '2020', content: '素材上新' },
   { name: '2019', content:'全部'},
];
  return (
    <div className='myDownload_container'>
        <div className="myDownload_container_tab1">
            <div className="myDownload_Top" > 
                <p>年份:</p>
              <ul>
                {tabList.map((tab, index) => (
                  <li key={index} onClick={() => handleTabClick(index)}
                    className={activeIndex === index? 'active' : ''}>
                    {tab.name}
                  </li>
                ))}
              </ul>
            </div>
          <div className="myDownload_bottom">
            {/* {tabList[activeIndex] && <div>{tabList[activeIndex].content}</div>} */}
          </div>
      </div>
          
    </div>
  )
}

export default year;